<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>小店商品</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/productmanageindex.css"/>
		
		
	</head>
	<body>
		<div class="web">
			<!--头部-->
		<header>
			<a href="../index/index.html"><img src="img/icon_back.png"/></a>
			<div class="explain fr" id="explain2"><img src="img/icon_search.png" alt="" /></div>
			<p id="finish" onclick="finish()">完成</p>
			<h5>小店商品</h5>
		</header>
		
		<div id="xiajiabg">
			<div class="dialog">
				<p>确定要下架该商品吗?</p>
				<div class="soldoutbtn">
					<a href="" id="xiajialeft" >取消</a>
					<a id="xiajiaright">下架</a>
				</div>
			</div>
			
		</div>
		
		<div id="productfinish">
			<div class="finishimg">
				<img src="img/icon_finish.png"/>
			</div>
			<p>商品下架成功!</p>
		</div>
		<div id="productfinish2">
			<div class="finishimg">
				<img src="img/icon_finish.png"/>
			</div>
			<p>删除成功!</p>
		</div>
		<div id="productfinish3">
			<div class="finishimg">
				<img src="img/icon_finish.png"/>
			</div>
			<p>置顶成功!</p>
		</div>
		
		
		<!--推广-->
			<div id="generalizeopen">
			<div  class="generalizebg">
				<div class="generalizecontent">
					<div class="icon_share">
					<div class="shareimg"><img src="img/share_weixin.png"/></div>
					<p>微信好友</p>
					</div>
					<div class="icon_share">
					<div class="shareimg"><img src="img/share_circle.png"/></div>
					<p>微信朋友圈</p>
					</div>
					<div class="icon_share">
					<div class="shareimg"><img src="img/share_sina.png"/></div>
					<p>新浪微博</p>
					</div>
					<div class="icon_share">
					<div class="shareimg"><img src="img/share_qq.png"/></div>
					<p>QQ好友</p>
					</div>
					<div class="icon_share">
					<div class="shareimg"><img src="img/share_z.png"/></div>
					<p>QQ空间</p>
					</div>
					<div class="icon_share">
					<div class="shareimg"><img src="img/share_contacts.png"/></div>
					<p>手机联系人</p>
					</div>
					<div class="icon_share">
					<div class="shareimg"><img src="img/share_customer.png"/></div>
					<p>老客户</p>
					</div>
					<div class="icon_share">
					<div class="shareimg"><img src="img/share_code.png"/></div>
					<p>二维码</p>
					</div>
					<div class="icon_share">
					<div class="shareimg"><img src="img/share_copyLink.png"/></div>
					<p>复制链接</p>
					</div>
				</div>
				<a onclick="generalizeclose()">取消</a>
				
			</div>
			</div>
		
		<section>
			<!-- 代码部分begin -->
<div class="wrap" id="wrap">
	<div class="nav3">
    <ul class="tabClick">
        <li class="active">上架商品(4)</li>
        <li id="two">已下架(3)</li>
    </ul>
    </div>
    <div class="lineBorder">
        <div class="lineDiv"><!--移动的div--></div>
    </div>
    <div class="tabCon">
        <div class="tabBox">
            <div class="tabList">
            	<div class="content">
            		<div id="checkboxall1">
						<input type="checkbox" />
						<label for=""></label>
						
				</div>
            		<div class="mian">
            			<img src="img/200x200.jpg" alt="" />
            		</div>
            		<div class="mian-msg">
            			<h5>韩国泡面农心拉面120g*5袋辛辣香菇牛肉速食汤面</h5>
            			<p>库存：999+件     利润：&yen;54.00/件</p>
            			<p>售价：<span>&yen;99.00</span></p>
            			<div class="icon_shuxing" id="shuxing2" onclick="open2()"><img src="img/icon_shuxing.png"/></div>
            			<div class="icon_yincang" id="yincang2" onclick="close2()"><img src="img/icon_no.png"/></div>
            		</div>
            		<div id="iconmore2">
            		<div class="more">
            			<a href="productcompile.html">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_compile.png" alt="" /></div>
            				<p>编辑</p>
            			</div>
            			</a>
            			<a id="soldout" onclick="xiajia()">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_soldout.png" alt="" /></div>
            				<p>下架</p>
            			</div>
            			</a>
            			<a onclick="deleteclick()">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_delete.png" alt="" /></div>
            				<p>删除</p>
            			</div>
            			</a>
            			<a onclick="generalize()">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_generalize.png" alt="" /></div>
            				<p>推广</p>
            			</div>
            			</a>
            			<a onclick="stickclick()">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_stick.png" alt="" /></div>
            				<p>置顶</p>
            			</div>
            			</a>
            			
            		</div>
            		</div>
            	</div>
            	
            	<!--2-->
            	<div class="content">
            		<div id="checkboxall2">
						<input type="checkbox" />
						<label for=""></label>
						
				</div>
            		<div class="mian">
            			<img src="img/200x200.jpg" alt="" />
            		</div>
            		<div class="mian-msg">
            			<h5>韩国泡面农心拉面120g*5袋辛辣香菇牛肉速食汤面</h5>
            			<p>库存：999+件     利润：&yen;54.00/件</p>
            			<p>售价：<span>&yen;99.00</span></p>
            			<div class="icon_shuxing" id="shuxing3" onclick="open3()"><img src="img/icon_shuxing.png"/></div>
            			<div class="icon_yincang" id="yincang3" onclick="close3()"><img src="img/icon_no.png"/></div>
            		</div>
            		<div id="iconmore3">
            		<div class="more">
            			<a href="">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_compile.png" alt="" /></div>
            				<p>编辑</p>
            			</div>
            			</a>
            			<a href="">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_soldout.png" alt="" /></div>
            				<p>下架</p>
            			</div>
            			</a>
            			<a href="">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_delete.png" alt="" /></div>
            				<p>删除</p>
            			</div>
            			</a>
            			<a href="">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_generalize.png" alt="" /></div>
            				<p>推广</p>
            			</div>
            			</a>
            			<a href="">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_stick.png" alt="" /></div>
            				<p>置顶</p>
            			</div>
            			</a>
            			
            		</div>
            		</div>
            	</div>
            	<div class="content">
            		<div id="checkboxall3">
						<input type="checkbox" />
						<label for=""></label>
						
				</div>
            		<div class="mian">
            			<img src="img/200x200.jpg" alt="" />
            		</div>
            		<div class="mian-msg">
            			<h5>韩国泡面农心拉面120g*5袋辛辣香菇牛肉速食汤面</h5>
            			<p>库存：999+件     利润：&yen;54.00/件</p>
            			<p>售价：<span>&yen;99.00</span></p>
            			<div class="icon_shuxing" id="shuxing4" onclick="open4()"><img src="img/icon_shuxing.png"/></div>
            			<div class="icon_yincang" id="yincang4" onclick="close4()"><img src="img/icon_no.png"/></div>
            		</div>
            		<div id="iconmore4">
            		<div class="more">
            			<a href="">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_compile.png" alt="" /></div>
            				<p>编辑</p>
            			</div>
            			</a>
            			<a href="">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_soldout.png" alt="" /></div>
            				<p>下架</p>
            			</div>
            			</a>
            			<a href="">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_delete.png" alt="" /></div>
            				<p>删除</p>
            			</div>
            			</a>
            			<a href="">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_generalize.png" alt="" /></div>
            				<p>推广</p>
            			</div>
            			</a>
            			<a href="">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_stick.png" alt="" /></div>
            				<p>置顶</p>
            			</div>
            			</a>
            			
            		</div>
            		</div>
            	</div>
            	<div class="content">
            		<div id="checkboxall4">
						<input type="checkbox" />
						<label for=""></label>
						
				</div>
            		<div class="mian">
            			<img src="img/200x200.jpg" alt="" />
            		</div>
            		<div class="mian-msg">
            			<h5>韩国泡面农心拉面120g*5袋辛辣香菇牛肉速食汤面</h5>
            			<p>库存：999+件     利润：&yen;54.00/件</p>
            			<p>售价：<span>&yen;99.00</span></p>
            			<div class="icon_shuxing" id="shuxing5" onclick="open5()"><img src="img/icon_shuxing.png"/></div>
            			<div class="icon_yincang" id="yincang5" onclick="close5()"><img src="img/icon_no.png"/></div>
            		</div>
            		<div id="iconmore5">
            		<div class="more">
            			<a href="">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_compile.png" alt="" /></div>
            				<p>编辑</p>
            			</div>
            			</a>
            			<a href="">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_soldout.png" alt="" /></div>
            				<p>下架</p>
            			</div>
            			</a>
            			<a href="">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_delete.png" alt="" /></div>
            				<p>删除</p>
            			</div>
            			</a>
            			<a href="">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_generalize.png" alt="" /></div>
            				<p>推广</p>
            			</div>
            			</a>
            			<a href="">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_stick.png" alt="" /></div>
            				<p>置顶</p>
            			</div>
            			</a>
            			
            		</div>
            		</div>
            	</div>
            </div>
            
            <div class="tabList">
            	<div class="content">
            	<div id="checkboxall5">
						<input type="checkbox" />
						<label for=""></label>
						
				</div>
            		<div class="mian">
            			<img src="img/200x200_2.jpg" alt="" />
            		</div>
            		<div class="mian-msg">
            			<h5>韩国泡面农心拉面120g*5袋辛辣香菇牛肉速食汤面</h5>
            			<p>库存：999+件     利润：&yen;54.00/件</p>
            			<p>售价：<span>&yen;99.00</span></p>
            			<div class="icon_shuxing" id="shuxing6" onclick="open6()"><img src="img/icon_shuxing.png"/></div>
            			<div class="icon_yincang" id="yincang6" onclick="close6()"><img src="img/icon_no.png"/></div>
            		</div>
            		<div id="iconmore6">
            		<div class="more">
            			<a href="">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_compile.png" alt="" /></div>
            				<p>编辑</p>
            			</div>
            			</a>
            			<a href="">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_soldout.png" alt="" /></div>
            				<p>下架</p>
            			</div>
            			</a>
            			<a href="">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_delete.png" alt="" /></div>
            				<p>删除</p>
            			</div>
            			</a>
            			<a href="">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_generalize.png" alt="" /></div>
            				<p>推广</p>
            			</div>
            			</a>
            			<a href="">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_stick.png" alt="" /></div>
            				<p>置顶</p>
            			</div>
            			</a>
            			
            		</div>
            		</div>
            	</div>
            	<div class="content">
            		<div id="checkboxall6">
						<input type="checkbox" />
						<label for=""></label>
						
				</div>
            		<div class="mian">
            			<img src="img/200x200_2.jpg" alt="" />
            		</div>
            		<div class="mian-msg">
            			<h5>韩国泡面农心拉面120g*5袋辛辣香菇牛肉速食汤面</h5>
            			<p>库存：999+件     利润：&yen;54.00/件</p>
            			<p>售价：<span>&yen;99.00</span></p>
            			<div class="icon_shuxing" id="shuxing7" onclick="open7()"><img src="img/icon_shuxing.png"/></div>
            			<div class="icon_yincang" id="yincang7" onclick="close7()"><img src="img/icon_no.png"/></div>
            		</div>
            		<div id="iconmore7">
            		<div class="more">
            			<a href="">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_compile.png" alt="" /></div>
            				<p>编辑</p>
            			</div>
            			</a>
            			<a href="">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_soldout.png" alt="" /></div>
            				<p>下架</p>
            			</div>
            			</a>
            			<a href="">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_delete.png" alt="" /></div>
            				<p>删除</p>
            			</div>
            			</a>
            			<a href="">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_generalize.png" alt="" /></div>
            				<p>推广</p>
            			</div>
            			</a>
            			<a href="">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_stick.png" alt="" /></div>
            				<p>置顶</p>
            			</div>
            			</a>
            			
            		</div>
            		</div>
            	</div>
            	<div class="content">
            		<div id="checkboxall7">
						<input type="checkbox" />
						<label for=""></label>
						
				</div>
            		<div class="mian">
            			<img src="img/200x200_2.jpg" alt="" />
            		</div>
            		<div class="mian-msg">
            			<h5>韩国泡面农心拉面120g*5袋辛辣香菇牛肉速食汤面</h5>
            			<p>库存：999+件     利润：&yen;54.00/件</p>
            			<p>售价：<span>&yen;99.00</span></p>
            			<div class="icon_shuxing" id="shuxing8" onclick="open8()"><img src="img/icon_shuxing.png"/></div>
            			<div class="icon_yincang" id="yincang8" onclick="close8()"><img src="img/icon_no.png"/></div>
            		</div>
            		<div id="iconmore8">
            		<div class="more">
            			<a href="">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_compile.png" alt="" /></div>
            				<p>编辑</p>
            			</div>
            			</a>
            			<a href="">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_soldout.png" alt="" /></div>
            				<p>下架</p>
            			</div>
            			</a>
            			<a href="">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_delete.png" alt="" /></div>
            				<p>删除</p>
            			</div>
            			</a>
            			<a href="">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_generalize.png" alt="" /></div>
            				<p>推广</p>
            			</div>
            			</a>
            			<a href="">
            			<div class="morecontent">
            				<div class="compile"><img src="img/icon_stick.png" alt="" /></div>
            				<p>置顶</p>
            			</div>
            			</a>
            			
            		</div>
            		</div>
            	</div>
            	
            </div>
            
        </div>
		</div>	
			
			
			
		</section>
		
		<footer>
			<div class="bottom-btn clearfix" id="bottom-btn1">
				<a  id="addbtn" class="fl">添加商品</a>
				<a  id="managebtn" class="fr" onclick="openproduct()">批量管理</a>
			</div>
			<div class="bottom-btn2" id="bottom-btn2">
				<div class="checkboxall">
				<input type="checkbox" />
				<label for=""></label>
				<span>全选</span>
				</div>
				<a id="delete">删除</a>
					<a id="soldout">下架</a>
				<a id="move">移到顶部</a>
			
				
			</div>
			
		</footer>
		</div>
		
		<script type="text/javascript" src="js/640commen.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
		<script charset="utf-8">
	window.onload = function (){
        var windowWidth = document.body.clientWidth; //window 宽度;
		var wrap = document.getElementById('wrap');
        var tabClick = wrap.querySelectorAll('.tabClick')[0];
        var tabLi = tabClick.getElementsByTagName('li');
        
        var tabBox =  wrap.querySelectorAll('.tabBox')[0];
        var tabList = tabBox.querySelectorAll('.tabList');
        
        var lineBorder = wrap.querySelectorAll('.lineBorder')[0];
        var lineDiv = lineBorder.querySelectorAll('.lineDiv')[0];
        
        var tar = 0;
        var endX = 0;
        var dist = 0;
        
        tabBox.style.overflow='hidden';
        tabBox.style.position='relative';
        tabBox.style.width=windowWidth*tabList.length+"px";
        
        for(var i = 0 ;i<tabLi.length; i++ ){
              tabList[i].style.width=windowWidth+"px";
              tabList[i].style.float='left';
              tabList[i].style.float='left';
              tabList[i].style.padding='0';
              tabList[i].style.margin='0';
              tabList[i].style.verticalAlign='top';
              tabList[i].style.display='table-cell';
        }
        
        for(var i = 0 ;i<tabLi.length; i++ ){
            tabLi[i].start = i;
            tabLi[i].onclick = function(){
                var star = this.start;
                for(var i = 0 ;i<tabLi.length; i++ ){
                    tabLi[i].className='';
                };
                tabLi[star].className='active';
                init.lineAnme(lineDiv,windowWidth/tabLi.length*star)
                init.translate(tabBox,windowWidth,star);
                endX= -star*windowWidth;
            }
        }
        
        function OnTab(star){
            if(star<0){
                star=0;
            }else if(star>=tabLi.length){
                star=tabLi.length-1
            }
            for(var i = 0 ;i<tabLi.length; i++ ){
                tabLi[i].className='';
            };
            
             tabLi[star].className='active';
            init.translate(tabBox,windowWidth,star);
            endX= -star*windowWidth;
        };
        
        tabBox.addEventListener('touchstart',chstart,false);
        tabBox.addEventListener('touchmove',chmove,false);
        tabBox.addEventListener('touchend',chend,false);
        //按下
        function chstart(ev){
            ev.preventDefault;
            var touch = ev.touches[0];
            tar=touch.pageX;
            tabBox.style.webkitTransition='all 0s ease-in-out';
            tabBox.style.transition='all 0s ease-in-out';
        };
        //滑动
        function chmove(ev){
            var stars = wrap.querySelector('.active').start;
            ev.preventDefault;
            var touch = ev.touches[0];
            var distance = touch.pageX-tar;
            dist = distance;
            init.touchs(tabBox,windowWidth,tar,distance,endX);
            init.lineAnme(lineDiv,-dist/tabLi.length-endX/4);
        };
        //离开
        function chend(ev){
            var str= tabBox.style.transform;
            var strs = JSON.stringify(str.split(",",1));  
            endX = Number(strs.substr(14,strs.length-18)); 
            
            if(endX>0){
                init.back(tabBox,windowWidth,tar,0,0,0.3);
                endX=0
            }else if(endX<-windowWidth*tabList.length+windowWidth){
                endX=-windowWidth*tabList.length+windowWidth
                init.back(tabBox,windowWidth,tar,0,endX,0.3);
            }else if(dist<-windowWidth/3){
                 OnTab(tabClick.querySelector('.active').start+1);
                 init.back(tabBox,windowWidth,tar,0,endX,0.3);
            }else if(dist>windowWidth/3){
                 OnTab(tabClick.querySelector('.active').start-1);
            }else{
                 OnTab(tabClick.querySelector('.active').start);
            }
            var stars = wrap.querySelector('.active').start;
            init.lineAnme(lineDiv,stars*windowWidth/4);
            
        };
	};
	
    var init={
        translate:function(obj,windowWidth,star){
            obj.style.webkitTransform='translate3d('+-star*windowWidth+'px,0,0)';
            obj.style.transform='translate3d('+-star*windowWidth+',0,0)px';
            obj.style.webkitTransition='all 0.3s ease-in-out';
            obj.style.transition='all 0.3s ease-in-out';
        },
        touchs:function(obj,windowWidth,tar,distance,endX){
            obj.style.webkitTransform='translate3d('+(distance+endX)+'px,0,0)';
            obj.style.transform='translate3d('+(distance+endX)+',0,0)px';
        },
        lineAnme:function(obj,stance){
            obj.style.webkitTransform='translate3d('+stance+'px,0,0)';
            obj.style.transform='translate3d('+stance+'px,0,0)';
            obj.style.webkitTransition='all 0.1s ease-in-out';
            obj.style.transition='all 0.1s ease-in-out';
        },
        back:function(obj,windowWidth,tar,distance,endX,time){
            obj.style.webkitTransform='translate3d('+(distance+endX)+'px,0,0)';
            obj.style.transform='translate3d('+(distance+endX)+',0,0)px';
            obj.style.webkitTransition='all '+time+'s ease-in-out';
            obj.style.transition='all '+time+'s ease-in-out';
        },
    }
    
</script>
	</body>
</html>
